<!-- 首页宣传部分 -->
<template>
  <div class="HomeIntroduction">
    <div class="title">
      <img
        src="https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/tradmakTitle1.png"
        class="trademarkTitle"
      />
      <div class="bottomBox">
        <div class="bottomTitle" @click="toNavBar()">查看更多</div>
        <img
          src="./../../../../public/img/home/rightImg.png"
          class="rightImg"
          @click="toNavBar()"
        />
      </div>
    </div>

    <div class="HomeIncon">
      <div class="container">
        <transition>
          <div class="leftBox">
            <div
              :class="{ leftContent: true, animated: true, fadeIn: fadeShow }"
            >
              <div class="leftTitle">{{ showdatav.title }}</div>
              <div class="leftTime">{{ showdatav.date }}</div>
              <div class="heightStyle"></div>
            </div>
            <div class="leftInfo">
              <div
                :class="{
                  leftInfoName: true,
                  animated: true,
                  fadeIn: fadeShow,
                }"
              >
                {{ showdatav.desc }}
              </div>
            </div>
            <router-link
              :to="{ name: 'p_dindetail', query: { id: showdatav.id } }"
            >
              <div :class="{ sunBtn: true, animated: true, fadeIn: fadeShow }">
                <div>查看详情</div>
                <img
                  src="./../../../../public/img/home/homeRightIcon.png"
                  class="homeRightIcon"
                />
              </div>
            </router-link>
          </div>
        </transition>
        <div class="rightBox">
          <div class="swiperBox">
            <swiper
              :options="swiperOptionn"
              ref="mySwipern"
              class="swiper_container"
              @slideChange="slideChangen()"
            >
              <swiper-slide
                class="swiper_slide"
                v-for="(item, index) of imgList"
                :key="index"
              >
                <img :src="item.img" class="swiper_img" @mouseover="goImg" />
              </swiper-slide>
              <!-- 如果需要导航按钮 -->
              <!-- <div
                v-show="isShow"
                class="swiper-button-prev"
                slot="button-prev"
              ></div>
              <div
                v-show="isShow"
                class="swiper-button-next"
                slot="button-next"
              ></div> -->
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <div class="dinBtmcontip">
      <div class="leftarrow" @click="blackData">
        <img
          class="lefticon"
          src="./../../../assets/img/header/leftArrow2.png"
          alt=""
        />
      </div>
      <ul class="upli">
        <li
          :class="{
            upliset: upset == 0 ? true : false,
            uplis: upset != 0 ? true : false,
          }"
          @click="upliset(0)"
        >
          <span class="uplinow"></span>
        </li>
        <li
          :class="{
            upliset: upset == 1 ? true : false,
            uplis: upset != 1 ? true : false,
          }"
          @click="upliset(1)"
        >
          <span class="uplinow"></span>
        </li>
        <li
          :class="{
            upliset: upset == 2 ? true : false,
            uplis: upset != 2 ? true : false,
          }"
          @click="upliset(2)"
        >
          <span class="uplinow"></span>
        </li>
        <li
          :class="{
            upliset: upset == 3 ? true : false,
            uplis: upset != 3 ? true : false,
          }"
          @click="upliset(3)"
        >
          <span class="uplinow"></span>
        </li>
        <li
          :class="{
            upliset: upset == 4 ? true : false,
            uplis: upset != 4 ? true : false,
          }"
          @click="upliset(4)"
        >
          <span class="uplinow"></span>
        </li>
      </ul>
      <div class="rightarrow" @click="goData">
        <img
          class="righticon"
          src="./../../../assets/img/header/rightArrow2.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script >
import { outstandingOwner } from "./../../../apis/api.js";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    // 这里存放数据
    return {
      upset: 0,
      isShow: false,
      showdatav: { title: "", date: "", desc: "", id: "" },
      news: [], //新闻内容
      swiperOptionn: {
        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
        loop: false,
        slidesPerView: 1,
        // autoplay: true,
      },
      imgList: [],
      fadeShow: false,
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    upliset(data) {
      this.upset = data;
      // this.fadeShow = false;
      if (data == 0) {
        this.$refs.mySwipern.$swiper.slideTo(0, 1000, false);
      } else if (data == 1) {
        this.$refs.mySwipern.$swiper.slideTo(1, 1000, false);
      } else if (data == 2) {
        this.$refs.mySwipern.$swiper.slideTo(2, 1000, false);
      } else if (data == 3) {
        this.$refs.mySwipern.$swiper.slideTo(3, 1000, false);
      } else if (data == 4) {
        this.$refs.mySwipern.$swiper.slideTo(4, 1000, false);
      }
    },
    blackData() {
      this.$refs.mySwipern.$swiper.slidePrev();
    },
    goData() {
      this.$refs.mySwipern.$swiper.slideNext();
    },
    toNavBar() {
      const { href } = this.$router.resolve({
        path: "/p_dinfor",
        query: { id: 1 },
      });
      window.open(href, "_blank");
    },
    seeDetails(newsId) {
      // console.log(newsId);
      const { href } = this.$router.resolve({
        name: "p_dindetail",
        query: { id: newsId },
      });
      window.open(href, "_blank");
    },
    goImg() {
      this.isShow = true;
    },
    async outstandingOwner() {
      let data = {
        type: 1,
      };
      let res = await outstandingOwner(data);
      if (res.data.result == "1") {
        this.news = res.data.body.list.splice(0, 5);
        this.imgList = this.news;
        this.showdatav = this.news[0];
      }
    },
    slideChangen(e) {
      const activeIndex = this.$refs.mySwipern.$swiper.activeIndex;
      this.upset = activeIndex;
      this.fadeShow = false;
      setTimeout(() => {
        this.fadeShow = true;
        this.showdatav = this.news[activeIndex];
      }, 1000);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.outstandingOwner();
    // this.slideChangen();
    
    this.fadeShow = true;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.HomeIntroduction {
  width: 1180px;
  margin: 0 auto;
}
.dinBtmcontip {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -15%);
  display: flex;
  align-items: center;
  .leftarrow {
    .lefticon {
      width: 40px;
      height: 17px;
      cursor: pointer;
    }
  }
  .upli {
    display: flex;
    align-items: center;
    .uplis {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      margin-left: 20px;
      cursor: pointer;
      .uplinow {
        width: 6px;
        height: 6px;
        background: #303133;
        border-radius: 50%;
      }
    }
    .upliset {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid #979797;
      margin-left: 20px;
      cursor: pointer;
      .uplinow {
        width: 6px;
        height: 6px;
        background: #303133;
        border-radius: 50%;
      }
    }
  }
  .rightarrow {
    margin-left: 20px;
    .righticon {
      width: 40px;
      height: 17px;
      cursor: pointer;
    }
  }
}
.title {
  width: 1180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bottomBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 13%;
  cursor: pointer;
}
.bottomTitle {
  font-size: 16px;
  color: #333;
}
.rightImg {
  width: 18px;
  height: 18px;
}
.trademarkTitle {
  width: 344px;
  height: 68px;
  margin-top: 13%;
}
.HomeIncon {
  width: 1180px;
  height: 460px;
  background: #ffffff;
  box-shadow: 0px 0px 40px 0px rgba(229, 229, 229, 0.5);
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.leftBox {
  width: 495px;
  height: 100%;
  position: relative;
}
.leftContent {
  position: absolute;
  top: 50px;
  left: 30px;
}
.leftTitle {
  width: 426px;
  font-size: 30px;
  color: #333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
}
.leftTime {
  font-size: 18px;
  color: #333;
  margin-top: 10px;
}
.heightStyle {
  width: 28px;
  height: 3px;
  background: #ec6a01;
  margin-top: 10px;
}
.leftInfo {
  width: 426px;
  height: 460px;
  position: absolute;
  top: 190px;
  left: 30px;
  text-align: justify;
  text-justify: distribute-all-lines;
}
.leftInfoName {
  width: 426px;
  height: 460px;
  font-size: 18px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 5;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
}
.rightBox {
  width: 685px;
  height: 100%;
}
.sunBtn {
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: #ff855b;
  border-radius: 4px;
  position: absolute;
  bottom: 80px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
  div {
    font-size: 16px;
    color: #fff;
  }
  .homeRightIcon {
    width: 27px;
    height: 11px;
  }
}
.swiperBox {
  width: 100%;
  height: 100%;
}
.swiper_container {
  width: 100%;
  height: 100%;
}
.swiper_slide {
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
.swiper_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, 0, 0);
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  opacity: 0.5;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px;
}
</style>